<!--
 * @Author: maomao
 * @Date: 2021-03-24 18:51:03
 * @Description: 
 * @FilePath: \clientapp\src\layouts\single-card.vue
-->
<template>
  <div height="100%" width="100%" class="login-container">
     <div class="content">
      <slot />
    </div>
  </div>
</template>

<script>
// import DxScrollView from "devextreme-vue/scroll-view";

import { useRoute } from 'vue-router';
import { watch, ref } from 'vue';

export default {
  components: {
    // DxScrollView
  },
  setup() {
    const route = useRoute();

    const title = ref(route.meta.title);
    const description = ref("");

    watch(() => route.path,
     () => {
        title.value = route.meta.title;
        description.value = route.meta.description;
     }
    )
    return {
      title,
      description
    }
  }
};
</script>

<style lang="scss">
@import "../themes/generated/variables.base.scss";
.login-container{
      -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    width: 100%;
        display: flex;
    margin: 0 auto;
    height: 100%;
  background-image: url(/src/assets/bg.png);
    background-size: cover;
}
</style>
